<% layout('/layouts/default.html', {title: '游泳馆访问量统计页', libs: ['dataGrid']}){ %>
<table style="width:100%;height:40%;">
	<tr style="width:100%;height:60%;">
		<td>
			<div class="main-content" >
			    <div class="box box-main">
					<div class="box-header" style="padding-top:10px;padding-bottom:0px">
					    <div class="titleShow">${natatoriumInfo.name} - 访问量数据</div>
					</div>			    
			        <div class="box-body">
			            <#form:form id="searchForm" model="${clickStats}" action="${ctx}/natatoriuminfo/clickStats/listData?natatoriumInfoId=${natatoriumInfo.id}" method="post" class="form-inline"
			            data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
				            <div class="topAll">
				                <div class="contentTop">
									<div class="titleItem">${text('年月：')}</div>
				                     <div class="control-inline" style="width:100px;">
				                         <div class="control-inline">
				                            <#form:input path="yearMonthStr" readonly="true" style="width:100px;" maxlength="20" class="form-control width-200" 
				                            placeholder="请选择年月"  dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM',isShowClear:false});"/>
				                        </div>
				                    </div> 
<!-- 				                    <button type="reset" class="btn-reset-list" style="float:right">${text('重置')}</button> -->
				                    <button type="submit" id="btnClickStatsChart" class="btn-save-list" style="float:right">${text('查询')}</button>
				                </div>
				            </div>
			        	</#form:form>
						<div class="chart">
							<div id="clickStatsChart" style="height: 250px;"></div>
						</div>
			        </div>
			    </div>
			</div>
			<div style="width:100%;height:5px;background:#F1F1F1;"></div>
			<div class="box-header" style="padding-top:10px;padding-bottom:0px">
			    <div class="titleShow">${natatoriumInfo.name} - 访问量数据</div>
			    <a href="javascript:" id="btnExport" class="d-in-block text-center btn-new-custom text-white mb13 ml5 mr10" title="${text('导出')}"><i class="glyphicon glyphicon-export"></i> ${text('导出')}</a>
			</div>		
			<div style="width:98%;margin-left:1%">
			    <table id="dataGrid"></table>
			    <div id="dataGridPage"></div>
			</div>
		</td>
	</tr>
</table>
<% } %>
<script src="${ctxStatic}/js/echarts.js"></script>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script>
//年月修改触发
// function dateChage(){
// 	alert($('yearMonthStr').val());
// }

//初始化DataGrid对象
$('#dataGrid').dataGrid({
	searchForm: $("#searchForm"),
	columnModel: [
		{header:'${text('手机号')}', name:'mobile', index:'a.mobile', width:150, align:"left"},
		{header:'${text('定位')}', name:'position', index:'a.position', width:150, align:"left"},
		{header:'${text('ip地址')}', name:'ip', index:'a.ip', width:150, align:"left"},
		{header:'${text('mac地址')}', name:'mac', index:'a.mac', width:150, align:"left"},
		{header:'${text('访问时间')}', name:'createDate', index:'a.create_date', width:150, align:"center"}
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){
		
	}
});

var clickStatsCount;//点击率统计数据
var myChart;

$(document).ready(function() {
	//年月	
	var date = new Date(new Date().getTime() + (1000 * 60 * 60 * 72));
	$("#yearMonthStr").val(date.getFullYear() + "-" + (date.getMonth()+1));
	$("#yearStr").val(date.getFullYear());
	
	findClickStatsCount();//查询点击率统计数据
})

//查询图标按钮点击事件
$('#btnClickStatsChart').click(function(){
	findClickStatsCount();//查询点击率统计数据
});
//查询点击率统计数据
function findClickStatsCount(){
	$.ajax({
	    url: "${ctx}/natatoriuminfo/clickStats/findClickStatsCountData?natatoriumInfoId=${natatoriumInfo.id}&yearMonthStr=" + $("#yearMonthStr").val(),
	    type: "post",
	    contentType: 'application/json',
	    dataType: 'json',
	    data: '',
	    success: function(data) {
	    	clickStatsCount = data.data;
    		generateOptions(clickStatsCount, 'clickStatsChart')
	    },
		error: function(e) {
    	}
	})
}

function generateOptions(arr, dom) {
	let xAxis = [];
	let yData = [];
	$.each(arr, function(k,v) {
		let obj = {
			name: v.name,
		}
// 		xAxis.push(obj)
		xAxis.push(v.name)
		yData.push(v.value)
	});
	option = {
//			  title: {
//			    text: 'Stacked Line'
//			  },
			  tooltip: {
			    trigger: 'axis'
			  },
			  legend: {
				left: 'right',
//			    left: '3%',
//			    bottom: '20%',
			    top: '6%',
//			    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
			  	data: xAxis
			  },
			  grid: {
			    left: '3%',
			    right: '4%',
			    bottom: '3%',
			    containLabel: true
			  },
//			  toolbox: {
//			    feature: {
//			      saveAsImage: {}
//			    }
//			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    data: xAxis
			  },
			  yAxis: {
			    type: 'value'
			  },
			  series: [
			    {
			      name: '访问次数',
			      type: 'line',
			      stack: 'Total',
			      data: yData
			    }
			  ]
			};
	// 基于准备好的dom，初始化echarts实例
	let myChart = echarts.init(document.getElementById(dom));
	myChart.setOption(option);
	window.addEventListener("resize",function(){
    	myChart.resize();
	})
}

//导出数据
$('#btnExport').click(function(){
	js.ajaxSubmitForm($('#searchForm'), {
		url:'${ctx}/natatoriuminfo/clickStats/exportData?natatoriumInfoId=${natatoriumInfo.id}',
		downloadFile:true
	});
});
</script>
<style>
.tabpanel_content .html_content iframe .hold-transition .wrapper{padding-bottom: 29px!important; background: #eaeaed!important;}
.col-xs-4 { padding: 0 12px 0 0;}
</style>